<template>
  <div>
    <input class="riginalInput" style="width:85%" @input="clickInput" v-model="value1" />
    <span style="float:left;color:red;padding-left:4px" v-if="value1.length<=0">不能为空</span>
    <span>
      <span class="zzjg_size12">{{value1.length}}</span>
      <span class="zzjg_size12">/{{strLength}}</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    value: String,
    strLength: {
      type: String,
      default() {
        return "18";
      },
    },
  },
  data() {
    return {
      value1: this.value,
    };
  },
  methods: {
    clickInput(e) {
      let str = e.target.value;
      if (str.length > this.strLength) {
        this.value1 = str.substring(0, this.strLength);
      }
      this.$emit("input", this.value1);
    },
  },
  watch: {
    value: {
      handler(newVal) {
        this.value1 = newVal;
      },
    },
  },
};
</script>

<style>
</style>